<template>
  <div class="redis">
    <div class="redis-sidebar">
      <Dropdown
        @on-click="createRedis"
        style="width: 240px;border-bottom: #cccccc 1px solid"
        placement="right-start"
        trigger="click">
        <Button type="text" ghost long>
          添加Redis
          <Icon type="ios-arrow-down"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="connect">新建连接</DropdownItem>
          <DropdownItem name="folder">新建文件夹</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Menu
        id="redisList"
        ref="redisList"
        @on-open-change="handleOnOpenChange"
        @on-select="handleOnSelect"
        accordion
        theme="dark"
        width="240px">
        <template v-for="item in redisList">
          <Submenu v-if="item.type === 'folder'" :name="item._id">
            <template slot="title">
              <Icon type="ios-paper"/>
              {{item.name}}
              <ButtonGroup style="position: absolute; right: 10px">
                <Button @click="updateData(item)" type="success" size="small" icon="ios-settings-outline"></Button>
                <Button @click="deleteData(item)" type="success" size="small" icon="ios-trash-outline"></Button>
              </ButtonGroup>
            </template>
            <MenuItem v-for="child in item.children" :name="child._id" style="padding-left: 23px">
              <Icon type="ios-paper"/>
              {{child.name}}
              <ButtonGroup style="position: absolute; right: 10px">
                <Button @click="monitorRedis(child)" type="success" size="small" icon="ios-eye-outline"></Button>
                <Button @click="updateData(child)" type="success" size="small" icon="ios-settings-outline"></Button>
                <Button @click="deleteData(child)" type="success" size="small" icon="ios-trash-outline"></Button>
              </ButtonGroup>
            </MenuItem>
          </Submenu>
          <MenuItem v-if="item.type === 'connect'" :name="item._id">
            <Icon type="ios-paper"/>
            {{item.name}}
            <ButtonGroup style="position: absolute; right: 10px">
              <Button @click="monitorRedis(item)" type="success" size="small" icon="ios-eye-outline"></Button>
              <Button @click="updateData(item)" type="success" size="small" icon="ios-settings-outline"></Button>
              <Button @click="deleteData(item)" type="success" size="small" icon="ios-trash-outline"></Button>
            </ButtonGroup>
          </MenuItem>
        </template>
      </Menu>
    </div>
    <div class="redis-detailed">
      <span id="BackTop"></span>
      <Tabs type="card" closable>
        <TabPane label="集群" name="集群">
          <ClusterMonitor></ClusterMonitor>
        </TabPane>
        <TabPane label="单机" name="单机">
          <Monitor></Monitor>
        </TabPane>
      </Tabs>
      <BackTop style="display: block">
        <a href="#BackTop">BackTop</a>
      </BackTop>
    </div>
    <Modal
      v-model="redisFormShow"
      :mask-closable="false"
      title="Redis"
      @on-ok="saveRedis"
      @on-cancel="redisFormShow = false">
      <Form :model="redisForm" :label-width="80">
        <FormItem label="folder">
          <Select v-model="redisForm.pId">
            <Option value="0">无</Option>
            <Option v-for="folder in folderList" :value="folder._id">
              {{folder.name}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="name">
          <Input v-model="redisForm.name"></Input>
        </FormItem>
        <FormItem label="host">
          <Input v-model="redisForm.host"></Input>
        </FormItem>
        <FormItem label="port">
          <Input v-model="redisForm.port"></Input>
        </FormItem>
        <FormItem label="password">
          <Input v-model="redisForm.password"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="folderFormShow"
      :mask-closable="false"
      title="Redis"
      @on-ok="saveFolder"
      @on-cancel="folderFormShow = false">
      <Form :model="folderForm" :label-width="80">
        <FormItem label="name">
          <Input v-model="folderForm.name"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import Monitor from './Monitor'
  import ClusterMonitor from './ClusterMonitor'
  import {listRedisData, saveRedisData} from '../../api/redis/redisDatabase'

  export default {
    name: 'Redis',
    components: {Monitor, ClusterMonitor},
    data () {
      return {
        redisList: [],
        folderList: [],
        redisFormShow: false,
        redisForm: {},
        folderFormShow: false,
        folderForm: {},
        redisDetailedTabs: []
      }
    },
    methods: {
      createRedis (name) {
        if (name === 'connect') {
          this.redisForm = {
            type: 'connect',
            pId: '0',
            port: 6379
          }
          listRedisData({database: 'redis', table: 'configure', type: 'folder', pId: '0'}, (res) => {
            this.folderList = res
          })
          this.redisFormShow = true
        }
        if (name === 'folder') {
          this.folderForm = {
            type: 'folder',
            pId: '0'
          }
          this.folderFormShow = true
        }
      },
      saveRedis () {
        saveRedisData(this.redisForm, (res) => {
          this.listRedis()
        })
      },
      saveFolder () {
        saveRedisData(this.folderForm, (res) => {
          this.listRedis()
        })
      },
      updateData (doc) {
        if (doc.type === 'connect') {
          this.redisForm = doc
          listRedisData({database: 'redis', table: 'configure', type: 'folder', pId: '0'}, (res) => {
            this.folderList = res
          })
          this.redisFormShow = true
        }
        if (doc.type === 'folder') {
          this.folderForm = doc
          this.folderFormShow = true
        }
      },
      deleteData (doc) {
        console.log(doc)
      },
      monitorRedis (doc) {
        doc.components = 'monitor'
        this.redisDetailedTabs.push(doc)
      },
      handleOnOpenChange (name) {
        if (name.length !== 0) {
          console.log(name)
        }
      },
      handleOnSelect (name) {
        console.log(name)
      },
      listRedis (doc) {
        listRedisData({pId: '0'}, (res) => {
          if (res !== null && res.length !== 0) {
            this.redisList = []
          }
          res.forEach(item => {
            if (item.type === 'folder') {
              listRedisData({pId: item._id}, (docs) => {
                item.children = docs
                this.redisList.push(item)
              })
            } else {
              this.redisList.push(item)
            }
          })
        })
      }
    },
    created () {
      this.listRedis()
    }
  }
</script>

<style>
  .redis {
    width: 100%;
    height: 100%;
    border-bottom: #cccccc 1px solid;
    float: left;
  }

  .redis-sidebar {
    width: 240px;
    height: 100%;
    background-color: #515a6e;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .redis-detailed {
    padding: 5px;
    width: calc(100% - 240px);
    height: 100%;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* iview样式重写 */
  #redisList > .ivu-menu-item {
    padding: 14px 24px 14px 10px;
  }

  #redisList > .ivu-menu-submenu > .ivu-menu-submenu-title {
    padding: 14px 24px 14px 10px;
  }

  #redisList > .ivu-menu-item-active:not(.ivu-menu-submenu),
  #redisList > .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
  #redisList > li > ul > .ivu-menu-item-active:not(.ivu-menu-submenu) {
    border-left: #5cadff 5px solid;
    border-right: none;
    color: #fff !important;
    background: #6f83a2 !important
  }

  #redisList > li > ul > .ivu-menu-item {
    padding-left: 10px !important;
  }

  #redisList > li > div > i:last-of-type {
    right: 60px;
  }


</style>